<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>
        添加装修案例导航
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/x-admin.css" media="all">
</head>

<body>
<div class="x-body">
    <form class="layui-form">


        <div class="layui-form-item">
            <label for="navName" class="layui-form-label">
                <span class="x-red">*</span>二级目录名称
            </label>
            <div class="layui-input-inline">
                <input type="text"  id="navName" name="navName" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="navNameEnglish" class="layui-form-label">
                <span class="x-red">*</span>二级目录英文名称
            </label>
            <div class="layui-input-inline">
                <input type="text"  id="navNameEnglish" name="navNameEnglish"
                       autocomplete="off" class="layui-input" required="" lay-verify="required">
            </div>
        </div>

        <br><br>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                保存
            </button>
        </div>
    </form>

    <div class="x-body" id="bannerApp">
        <table class="layui-table">
            <thead>
            <tr>
                <th>
                    中文导航
                </th>
                <th>
                    英文导航
                </th>

                <th>
                    状态
                </th>

                <th>
                    操作
                </th>

            </tr>
            </thead>
            <tbody id="productTable">

            </tbody>
        </table>

        <div id="page"></div>
    </div>

    <div class="x-body" id="div3">

    </div>



</div>
<script src="/js/jquery-2.2.4.min.js" charset="utf-8">
</script>
<script src="/lib/layui/layui.js" charset="utf-8">
</script>
<script src="/js/x-layui.js" charset="utf-8">
</script>
<script src="/js/vue.js" charset="utf-8">
</script>
<script type="text/javascript" src="/js/wangEditor.js"></script>
<script>

    var E = window.wangEditor
    var editor = new E('#div2');
    editor.customConfig.pasteIgnoreImg = false;
    editor.customConfig.uploadImgShowBase64 = true;

    editor.customConfig.uploadImgServer = '/upload';
    editor.customConfig.uploadFileName = 'file';

    editor.customConfig.menus = [
        'bold',  // 粗体
        'fontSize',  // 字号
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'code',  // 插入代码
        'link',  // 插入链接
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'undo'  // 撤销

    ]


    editor.customConfig.onfocus = function () {

    }

    editor.customConfig.onblur = function (html) {

    }

    editor.create();
    $(document).ready(function () {
        loadAnliNav();
    });


    var imageFilename = '';

    layui.use(['form','layer', 'upload'], function(){
        $ = layui.jquery;
        var form = layui.form();
        var layer = layui.layer;

        layui.upload({
            url: '/bo/homePicture/upload.html', //上传接口
            success: function(res){ //上传成功后的回调
                imageFilename = res.data.filename;
                $('#productImage').html('<img src="'+ res.data.imageUrl +'" width="100px" height="40px">');
            }
        });

        var featurePro = [];
        //监听提交
        form.on('submit(add)', function(data){

//            var context = editor.txt.html();

            //发异步，把数据提交给服务器
            $.ajax({
                url: '/bo/saveAnliNav',
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    navName : $('#navName').val(),
                    navNameEnglish : $('#navNameEnglish').val()

                },
                timeout: 10000,    //超时时间
                dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                success: function (ajaxData, textStatus, jqXHR) {
                    if (1000 != ajaxData.code) {
                        layer.alert(ajaxData.message, {icon: 5},function (index) {
                            layer.close(index);
                        });
                        return;
                    }

                    layer.alert("保存成功", {icon: 6}, function (index) {
                        layer.close(index);
                        location.reload();
                    });


                }
            });

            return false;
        });
    });

    function loadAnliNav() {
        $.ajax({
            url: '/bo/listAnliNav',
            type: 'GET', //GET
            async: true,    //或false,是否异步
            data: {

            },
            timeout: 10000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (ajaxData, textStatus, jqXHR) {
                if (1000 != ajaxData.code) {
                    layer.alert(ajaxData.message, {icon: 5},function (index) {
                        layer.close(index);
                    });
                    return;
                }

                let msg = '';
                let results = ajaxData.data;
                for (let i=0;i<results.length;i++) {
                    var cc = results[i].status == 0 ? "不可用" : "可用";
                    msg += '                            <tr>\n' +
                        '                                <td>'+results[i].navTitle+'</td>\n' +
                        '                                <td>'+results[i].navTitleEn+'</td>\n' +
                        '                                <td>'+cc+'</td>\n' +
                        '                                <td><button onclick="changeEnable('+results[i].id+')">可用</button>&nbsp;&nbsp;<button onclick="changeUnEnable('+results[i].id+')">不可用</button></td>\n' +
                        '                            </tr>';
                }
                $('#productTable').html(msg);
            }
        });
    }

    function changeUnEnable(id) {
        $.ajax({
            url: '/bo/changeAnliStatus',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                id : id,
                status : 0

            },
            timeout: 10000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (ajaxData, textStatus, jqXHR) {
                if (1000 != ajaxData.code) {
                    layer.alert(ajaxData.message, {icon: 5},function (index) {
                        layer.close(index);
                    });
                    return;
                }

                layer.alert("修改成功", {icon: 6}, function (index) {
                    layer.close(index);
                    location.reload();
                });


            }
        });
    }

    function changeEnable(id) {
        $.ajax({
            url: '/bo/changeAnliStatus',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                id : id,
                status : 1

            },
            timeout: 10000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (ajaxData, textStatus, jqXHR) {
                if (1000 != ajaxData.code) {
                    layer.alert(ajaxData.message, {icon: 5},function (index) {
                        layer.close(index);
                    });
                    return;
                }

                layer.alert("修改成功", {icon: 6}, function (index) {
                    layer.close(index);
                    location.reload();
                });


            }
        });
    }

    function loadHomePicture() {
        $.ajax({
            url: '/listIndexBanner',
            type: 'GET', //GET
            async: true,    //或false,是否异步
            data: {

            },
            timeout: 10000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (ajaxData, textStatus, jqXHR) {
                if (1000 != ajaxData.code) {
                    layer.alert(ajaxData.message, {icon: 6},function () {});
                    return;
                }

                let msg = '';
                let results = ajaxData.data;
                for (let i=0;i<results.length;i++) {
                    msg += '                            <tr>\n' +
                        '                                <td><img src="'+results[i].picUrl+'" width="60px" height="40px"></td>\n' +
                        '                                <td>'+results[i].picTitle+'</td>\n' +
                        '                                <td><button onclick="del('+results[i].id+')">删除</button></td>\n' +
                        '                            </tr>';
                }
                $('#productTable').html(msg);
            }
        });
    }

</script>
<script>

</script>
</body>

</html>